<template>
  <section>
    <h2>获取dom节点</h2>
    <div ref="mydom">我是一个div</div>
    <button @click="handleClick">点击我</button>
    <h3>步骤</h3>
    <ol>
      <li>ref包装一个空</li>
      <li>ref返回的变量名定义和dom标签上的ref的名称一样</li>
      <li>记得return出去</li>
      <li>使用包装对象的.value获取DOM对象</li>
    </ol>
  </section>
</template>

<script lang="ts">
import { ref } from "vue";

export default {
  setup() {
    const mydom = ref();

    function handleClick() {
      console.log(mydom.value.innerText);
    }

    return {
      handleClick,
      mydom
    };
  },
};
</script>

<style>
</style>